import React, { useEffect, useState } from 'react';
import './Exchange.less';
import Image from '../../static/images/BBD房子.png';
import { Input, Space, Table, Tag, Button, Modal, Pagination } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import axios from '../../utils/request';

export default function index() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  const [state, setstate] = useState([]);
  const [sta, setSta] = useState([]);
  const [zong, setzong] = useState(0);
  const [pageSize, setpageSize] = useState(5);
  const [page, setpage] = useState(1);
  const [search, getSearch] = useState('');
  const onChange = (e) => {
    console.log(e);
    getSearch(e.target.value);
  };
  const showModal = (item) => {
    setstate([item]);
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const showModal1 = (item) => {
    setstate([item]);
    setIsModalOpen1(true);
  };

  const handleOk1 = () => {
    setIsModalOpen1(false);
  };

  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };
  const fy = (a: any, n: any) => {
    console.log(a, n);
    getState(a, n, search);
  };
  useEffect(() => {
    getState(page, pageSize, search);
  }, []);

  const getState = async (p: number, ps: number, k: string) => {
    getSearch(k);
    setpage(p);
    setpageSize(ps);
    let res;
    if (k) {
      res = await axios.get(
        `/cxy/getRecall?kw=${search}&page=${p}&pageSize=${ps}`,
      );
    } else {
      res = await axios.get(`/cxy/getRecall?page=${p}&pageSize=${ps}`);
    }
    setSta(res.data);
    setzong(res.all.length);
    console.log(res);
  };
  const hss = () => {
    getState(page, pageSize, search);
  };
  const Clear = () => {
    getState(page, pageSize, '');
    getSearch('');
  };
  interface DataType {
    key: string;
    name: string;
    time: string;
    person: string;
    iphone: number;
    address: string;
    tags: string[];
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '订单编号',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '创建时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: '联系人',
      dataIndex: 'person',
      key: 'person',
    },
    {
      title: '联系电话',
      dataIndex: 'iphone',
      key: 'iphone',
    },
    {
      title: '回收地点',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '订单状态',
      key: 'tags',
      dataIndex: 'tags',
      render: (tags: string[]) => (
        <span>
          {tags.map((tag) => {
            let color = tag.length > 5 ? 'geekblue' : 'green';
            if (tag === 'loser') {
              color = 'volcano';
            }
            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </span>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>
            <Button
              style={{
                borderRadius: '5px',
                backgroundColor: 'black',
                color: 'white',
              }}
              onClick={() => {
                showModal(record);
              }}
            >
              查看详情
            </Button>
          </a>
          <a>
            <Button
              type="primary"
              style={{ borderRadius: '5px' }}
              onClick={() => {
                showModal1(record);
              }}
            >
              接单
            </Button>
          </a>
        </Space>
      ),
    },
  ];

  return (
    <div className="quan1">
      <div className="quan2">
        <div className="header1"></div>
        <div className="bottom1"></div>
        <div className="ding2">
          <div className="headerding1">
            <ul>
              <li
                style={{ fontSize: '2vh', fontWeight: '800', color: 'white' }}
              >
                回收订单管理
              </li>
              <li style={{ color: 'white' }}>
                <img
                  src={Image}
                  alt=""
                  style={{ width: '3vh', height: '3vh' }}
                />
              </li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>订单管理</li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>
                回收订单管理
              </li>
            </ul>
          </div>
          <div className="ding1">
            <div className="title">
              <div className="Content">
                <ul>
                  <li style={{ paddingRight: '10vh', fontSize: '2vh' }}>
                    回收订单管理
                  </li>
                  <li style={{ paddingRight: '2vh' }}>
                    <span>联系人电话：</span>
                  </li>
                  <li>
                    <Input
                      placeholder="请输入联系人电话"
                      style={{ marginTop: '-0.5vh' }}
                      allowClear
                      value={search}
                      onChange={onChange}
                      onPressEnter={hss}
                    />
                  </li>
                  <li>
                    <Button
                      type="primary"
                      style={{ marginTop: '-0.5vh', marginLeft: '1vh' }}
                      onClick={Clear}
                    >
                      清除
                    </Button>
                  </li>
                </ul>
              </div>
            </div>
            <div className="content">
              <Table
                columns={columns}
                dataSource={sta}
                scroll={{ x: 1000 }}
                pagination={false}
              />
              <Pagination
                total={zong}
                responsive
                style={{ marginLeft: '38%', marginTop: '5%' }}
                current={page}
                onChange={fy}
                defaultPageSize={pageSize}
              />
            </div>
            <Modal
              title="订单详情"
              open={isModalOpen}
              onOk={handleOk}
              width={800}
              onCancel={handleCancel}
            >
              <div className="model1">
                <div className="ban">
                  <ul>
                    <li>订单信息</li>
                  </ul>
                </div>
                {state.map((item, index) => {
                  return (
                    <div className="vbn" key={index}>
                      <div className="xin1">
                        <ul style={{ listStyle: 'none', display: 'flex' }}>
                          <li style={{ paddingRight: '7vh' }}>
                            订单编号：{item.name}
                          </li>
                          <li>创建时间：{item.time}</li>
                        </ul>
                      </div>
                      <div className="xin2">
                        <ul style={{ listStyle: 'none', display: 'flex' }}>
                          <li style={{ marginRight: '12vh' }}>
                            联系人：{item.person}
                          </li>
                          <li style={{ marginRight: '5vh' }}>
                            联系方式：{item.iphone}
                          </li>
                          <li>详细地址：{item.address}</li>
                        </ul>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="model2">
                <div className="ban1">
                  <ul>
                    <li>收货员信息</li>
                  </ul>
                </div>
                <div className="vbn1">
                  <div className="nac1"></div>
                  <div className="nac2"></div>
                </div>
              </div>
            </Modal>
            <Modal
              title="订单详情"
              open={isModalOpen1}
              onOk={handleOk1}
              onCancel={handleCancel1}
              width={800}
            >
              <div className="model1">
                <div className="ban">
                  <ul>
                    <li>订单信息</li>
                  </ul>
                </div>
                {state.map((item, index) => {
                  return (
                    <div className="vbn" key={index}>
                      <div className="xin1">
                        <ul style={{ listStyle: 'none', display: 'flex' }}>
                          <li style={{ paddingRight: '7vh' }}>
                            订单编号：{item.name}
                          </li>
                          <li>创建时间：{item.time}</li>
                        </ul>
                      </div>
                      <div className="xin2">
                        <ul style={{ listStyle: 'none', display: 'flex' }}>
                          <li style={{ marginRight: '12vh' }}>
                            联系人：{item.person}
                          </li>
                          <li style={{ marginRight: '5vh' }}>
                            联系方式：{item.iphone}
                          </li>
                          <li>详细地址：{item.address}</li>
                        </ul>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="model2">
                <div className="ban1">
                  <ul>
                    <li>收货员信息</li>
                  </ul>
                </div>
                <div className="vbn1">
                  <div className="nac1"></div>
                  <div className="nac2"></div>
                </div>
              </div>
            </Modal>
          </div>
        </div>
      </div>
    </div>
  );
}
